<template>
    <div>
          <el-table
            :data="tableData"
            style="width: 100%">

            <el-table-column
            label="商品详情"
            width="120">
            <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                    <router-link :to="'/detail?category='+scope.row.category+'&id='+scope.row.id" style="color:black">
                        <img :src="require('@/assets/'+scope.row.category+'/'+scope.row.id+'/1.jpg')" style="width: 100px; height: 100px"><br>
                    </router-link>
                </div>
            </template>
            </el-table-column>

            <el-table-column
            label="商品分类"
            width="100">
            <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.category }}</el-tag>
                </div>
            </template>
            </el-table-column>

            <el-table-column
            label="商品标题"
            width="400">
            <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.title }}</el-tag>
                </div>
            </template>
            </el-table-column>

            <el-table-column
            label="店铺归属"
            width="100">
            <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.shop }}</el-tag>
                </div>
            </template>
            </el-table-column>

            <el-table-column
            label="商品价格"
            width="100">
            <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.price }}</el-tag>
                </div>
            </template>
            </el-table-column>

            <el-table-column
            label="购买人数"
            width="100">
            <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.buyer }}</el-tag>
                </div>
            </template>
            </el-table-column>

            <el-table-column
            label="库存数量"
            width="100">
            <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                    <el-tag size="medium">{{ scope.row.stock }}</el-tag>
                </div>
            </template>
            </el-table-column>

            <el-table-column
            label="当前状态"
            width="100">
            <template slot-scope="scope">
                <div slot="reference" class="name-wrapper" v-if="scope.row.status == 'checking'">
                    <el-tag size="medium">审核中</el-tag>
                </div>
                <div slot="reference" class="name-wrapper" v-if="scope.row.status == 'ok'">
                    <el-tag size="medium">审核通过</el-tag>
                </div>
                <div slot="reference" class="name-wrapper" v-if="scope.row.status == 'no'">
                    <el-tag size="medium">审核不通过</el-tag>
                </div>
            </template>
            </el-table-column>

            <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                size="mini"
                type="info"
                @click="dialogFormVisible = true ; form.id=scope.row.id ; form.category=scope.row.category ; form.title=scope.row.title ; form.price=scope.row.price ; form.stock=scope.row.stock ; form.status=scope.row.status">修改</el-button>

                <el-dialog title="修改商品信息" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="商品标题" :label-width="formLabelWidth">
                    <el-input v-model="form.title" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="商品价格" :label-width="formLabelWidth">
                    <el-input v-model="form.price" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="商品库存" :label-width="formLabelWidth">
                    <el-input v-model="form.stock" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="商品状态" :label-width="formLabelWidth">
                    <el-select v-model="form.status" placeholder="请选择商品状态">
                        <el-option label="通过" value="ok"></el-option>
                        <el-option label="不通过" value="no"></el-option>
                        <el-option label="审核中" value="checking"></el-option>
                    </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleChange">确 定</el-button>
                </div>
                </el-dialog>
                <el-button
                size="mini"
                type="danger"
                style="margin-left:10px"
                @click="handleDelete(scope.row)">删除</el-button>
            </template>
            </el-table-column>

        </el-table>
    </div>
</template>

<script>
export default {
    name: "allshop",
    data() {
      return {
        tableData: [],
        dialogFormVisible: false,
        formLabelWidth: '120px',
        form: {
          id: '',
          category: '',
          title: '',
          price: '',
          stock: '',
          status: ''
        },
      }
    },
     methods: {
      handleDelete(row) {
            this.$axios.post("/api/deleteShop",this.$querystring.stringify({
            id:row.id,
            category:row.category
            })).then(reponse=>{
            console.log(reponse);
            if(reponse.data == true){
                /*
                成功跳转
                */
               alert("删除成功")
            }else{
                alert("系统错误")
            }
        })
      },
      handleChange(){
          this.$axios.post("/api/updateProduct",this.$querystring.stringify({
            id:this.form.id,
            category:this.form.category,
            title:this.form.title,
            price:this.form.price,
            stock:this.form.stock,
            status:this.form.status
            })).then(reponse=>{
            console.log(reponse);
            if(reponse.data == true){
                /*
                成功跳转
                */
               this.dialogFormVisible = false;
               alert("修改成功")
            }else{
                alert("修改失败")
            }
        })
        .catch(error=>{
            console.log(error);
        })
      }
    },

    mounted(){
        if(this.$cookies.get("allshop_second") != 'ok'){
            alert("无权限");
            this.$router.push("/adminindex")
        }else{
        this.$axios.get("/api/getAllProduct").then(res=>{
            console.log(res.data);
            this.tableData = res.data
        });
        }
    }
}
</script>

<style scoped>

</style>